<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="antd.min.css">
    <script src="vue.min.js"></script>
    <script src="antd.min.js"></script>
    <style>
        *{
            margin: 0 ;
            padding: 0;
       
           
        }
        .ant-layout-sider{
            height: 700px;
            background-color: cornflowerblue;
        }  
        .ant-layout-header{
            height: 50x;
            background-color: cadetblue;
        }
        .ant-layout-content{
            height: 200px;
        }
       
    </style>
</head>
<body>
    <div id="app">
        <a-layout>
            <!-- <a-layout-sider>我是导航</a-layout-sider> -->
            <a-layout-header>
                <div>
                    <div style="float: left;">CMS管理系统</div>
                    <div style="margin-left: 200px;">
                          <a-menu theme="dark" mode="horizontal" style="background-color:  cadetblue;line-height: 64px;">
                        <a-menu-item key="1">人员管理</a-menu-item>
                        <a-menu-item key="2">增加员工</a-menu-item>
                        <a-menu-item key="3">人查询员工</a-menu-item>
                    </a-menu>    
                    </div>
                </div>
            </a-layout-header>
            <a-layout>
                   <a-layout-content>
                <a-layout>
                    <a-layout-sider>
                        <a-menu theme="dark" mode="inline" style="height: 700px;">
                            <a-menu-item >人事管理</a-menu-item>
                            <a-sub-menu>
                                <a-menu-item key="1">人员管理</a-menu-item>
                                <a-menu-item key="2">增加员工</a-menu-item>
                                <a-menu-item key="3">人查询员工</a-menu-item>
                            </a-sub-menu>
                            <a-menu-item >员工管理</a-menu-item>
                            <a-sub-menu>
                                <a-menu-item key="1">人员管理</a-menu-item>
                                <a-menu-item key="2">增加员工</a-menu-item>
                                <a-menu-item key="3">人查询员工</a-menu-item>
                            </a-sub-menu>
                            </a-menu>
                    </a-layout-sider> 
                    <a-layout>
                        <a-breadcrumb>
                            <a-breadcrumb-item>首页</a-breadcrumb-item>
                            <a-breadcrumb-item>管理</a-breadcrumb-item>
                            <a-breadcrumb-item>员工信息1</a-breadcrumb-item>
                            <a-breadcrumb-item>员工信息2</a-breadcrumb-item>
                            <a-breadcrumb-item>员工信息3</a-breadcrumb-item>
                        </a-breadcrumb>
                        <div style="background-color: silver;height: 400px;">
                            内容
                        </div>
                    </a-layout>
                </a-layout>
            </a-layout-content>
            </a-layout>
            <a-layout>
                
            </a-layout>
        </a-layout>
    </div>
    <script>
        new Vue({
            el:"#app"
        })
    </script>
</body>
</html>